<template>
  <div id="branddetail">
    <navigation-bar></navigation-bar>
    <!-- 下方盒子 -->
    <div class="container">
      <!-- 头部面包屑 -->
      <div class="head_breadcrumb">
        <div class="center_breadcrumb">
          <span v-for="(item, index) in breadcrumb" :key="index"
            >{{ item }}></span
          >
        </div>
      </div>
      <!-- 下方居中白色盒子 -->
      <div class="section">
        <!-- 商品分类 和相关品牌 -->
        <div class="classfytitle">
          <div class="classfy">
            <span class="title1">商品分类</span>
            <div class="classfyright">
              <span class="righttop"
                >{{ classfy }}>{{ classfyChild }}>{{ classfyname }}</span
              >
              <div class="rightbottom">
                <span>全部</span>
                <span v-for="(item, index) in goodslist" :key="index">
                  {{ item }}
                </span>
              </div>
            </div>
          </div>
        </div>
        <!-- 综合排序部分 -->
        <div class="goodssort">
          <!-- 排序部分头部 综合排序 价格排序 -->
          <div class="sort_titles">
            <div class="sort">
              <span>综合排序</span>
              <span>价格排序</span>
              <span>销量排序</span>
            </div>
            <div class="goodsnum">
              <p>
                共
                <span>{{ goodsnum }}</span
                >件相关商品
              </p>
            </div>
          </div>
          <!-- 商品类别卡片 外层盒子-->
          <div class="sortcard">
            <!-- 每一个卡片模块 -->
            <div
              class="carditem"
              v-for="(item, index) in sortlist"
              :key="index"
            >
              <!-- 商品图片 -->
              <img @click="togoodsdetail()" :src="item.imgUrl" alt />
              <!-- 商品中间描述即型号 -->
              <div class="item_center">
                <p class="goods_desc" @click="togoodsdetail()">
                  {{ item.goodsname }}
                </p>
                <span class="goods_model">型号:{{ item.goodsmodel }}</span>
              </div>
              <!-- 商品价格 -->
              <span class="goodsprice">{{ item.goodsprice }}</span>
              <!-- 购买数量 -->
              <div class="purchasesCountSelect">
                <el-input-number
                  v-model="num"
                  @change="handleChange"
                  :min="1"
                  :max="10"
                  size="mini"
                ></el-input-number>
              </div>
              <!-- 订购按钮 -->
              <div class="orderbuy">
                <span>订购</span>
              </div>
            </div>
          </div>
          <!-- 底部分液器 -->
          <div class="pagination">
            <el-pagination
              background
              layout="prev, pager, next"
              :total="100"
              class="pbg"
            ></el-pagination>
          </div>
        </div>
      </div>
    </div>
    <right></right>
    <foot></foot>
  </div>
</template>

<script>
import right from "../../components/common/right_logo";
import navigationBar from "../../components/navigationBar.vue";
import foot from "../../components/footer";
export default {
  components: {
    navigationBar,
    foot,
    right
  },
  data() {
    return {
      goodsnum: 18,
      classfy: "品类B",
      classfyChild: "品类B-01",
      classfyname: "商品006",
      sortlist: [
        {
          imgUrl: "",
          goodsname:
            "MSA梅思安 标准型安全帽,黄色PE帽壳,一指键帽衬,PVC吸汗带,D型下颏带",
          goodsprice: "￥99.0/包",
          goodsmodel: "UT395A"
        },
        {
          imgUrl: "",
          goodsname: "优利德 彩屏激光测距仪 50m；UT395A",
          goodsprice: "￥99.0/包",
          goodsmodel: "UT395A"
        },
        {
          imgUrl: "",
          goodsname:
            "得力(deli) 佳宣A4复印纸 办公白纸批发 原木浆打印白纸 打印复印纸",
          goodsprice: "￥99.0/包",
          goodsmodel: "UT395A"
        },
        {
          imgUrl: "",
          goodsname:
            "得力(deli) 佳宣A4复印纸 办公白纸批发 原木浆打印白纸 打印复印纸",
          goodsprice: "￥99.0/包",
          goodsmodel: "UT395A"
        },
        {
          imgUrl: "",
          goodsname:
            "MSA梅思安 标准型安全帽,黄色PE帽壳,一指键帽衬,PVC吸汗带,D型下颏带",
          goodsprice: "￥99.0/包",
          goodsmodel: "UT395A"
        }
      ],
      breadcrumb: ["首页", "品牌中心", "品牌A"],
      goodslist: [
        "商品007",
        "商品007",
        "商品007",
        "商品007",
        "商品007",
        "商品007",
        "商品007",
        "商品007",
        "商品007",
        "商品007",
        "商品007",
        "商品007",
        "商品007",
        "商品007",
        "商品007",
        "商品007",
        "商品007",
        "商品007",
        "商品007",
        "商品007",
        "商品007",
        "商品007",
        "商品007",
        "商品007",
        "商品007",
        "商品007",
        "商品007"
      ],
      brandlist: [
        "品牌L",
        "品牌L",
        "品牌L",
        "品牌L",
        "品牌L",
        "品牌L",
        "品牌L",
        "品牌L",
        "品牌L",
        "品牌L",
        "品牌L",
        "品牌L",
        "品牌L",
        "品牌L",
        "品牌L",
        "品牌L",
        "品牌L",
        "品牌L",
        "品牌L"
      ]
    };
  },
  methods: {
    handleChange(value) {
      console.log(value);
    },
    togoodsdetail() {
      this.$router.push({ path: "/b_goodsdetail", name: "b_goodsdetail" });
    }
  }
};
</script>

<style lang="scss" scoped>
.container {
  width: 100%;
  // min-height: 546px;
  background-color: rgb(238, 232, 232);
  padding-bottom: 20px;

  .section {
    width: 1200px;
    margin: 0 auto;
    // min-height: 546px;
    .classfytitle {
      background-color: #fff;
      width: 100%;
      padding: 12px 16px;
      box-sizing: border-box;
      margin-bottom: 20px;
      .classfy {
        display: flex;
        width: 100%;
        height: 66%;
        .title1 {
          display: block;
          font-size: 16px;
          font-family: Microsoft YaHei;
          font-weight: 400;
          color: rgba(50, 50, 50, 1);
          margin-right: 30px;
        }
        .classfyright {
          flex: 1;
          height: 100%;
          span.righttop {
            display: block;
            font-size: 16px;
            font-family: Microsoft YaHei;
            font-weight: 400;
            color: rgba(224, 32, 63, 1);
            margin-bottom: 10px;
            cursor: pointer;
          }
          .rightbottom {
            span {
              font-size: 14px;
              font-family: Microsoft YaHei;
              font-weight: 520;
              color: rgba(93, 93, 93, 1);
              line-height: 26px;
              margin-right: 10px;
              cursor: pointer;
            }
          }
        }
      }
      .brand {
        display: flex;
        width: 100%;
        height: 33%;
        .title2 {
          display: block;
          font-size: 16px;
          font-family: Microsoft YaHei;
          font-weight: 400;
          color: rgba(50, 50, 50, 1);
          margin-right: 30px;
        }
        .brandright {
          .allbrand {
            font-size: 16px;
            font-family: Microsoft YaHei;
            font-weight: 400;
            color: rgba(224, 32, 63, 1);
            margin-bottom: 10px;
            cursor: pointer;
            margin-right: 10px;
          }
          .alllist {
            font-size: 16px;
            font-family: Microsoft YaHei;
            font-weight: 520;
            color: rgba(93, 93, 93, 1);
            line-height: 26px;
            margin-right: 10px;
            cursor: pointer;
          }
        }
      }
    }
    .goodssort {
      width: 100%;
      background-color: #fff;
      //   height: 400px;
      padding: 12px 0px;
      box-sizing: border-box;
      margin-bottom: 20px;
      .sort_titles {
        height: 36px;
        width: 100%;
        border-bottom: 1px solid rgba(230, 230, 230, 1);
        padding: 0 16px;
        box-sizing: border-box;
        display: flex;
        justify-content: space-between;
        .sort {
          span {
            width: 65px;
            height: 17px;
            margin-right: 20px;
            font-size: 16px;
            font-family: Microsoft YaHei;
            font-weight: 400;
            color: rgba(128, 128, 128, 1);
            cursor: pointer;
          }
        }
        .goodsnum {
          position: relative;
          top: -14px;
          span {
            display: inline-block;
            padding: 0 2px;
            color: rgba(224, 32, 63, 1);
          }
        }
      }
      .sortcard {
        padding: 0px 16px 10px 16px;
        width: 100%;
        height: 100%;
        box-sizing: border-box;
        .carditem {
          //    margin: 10px;
          width: 100%;
          //   height: 230px;
          border-bottom: 1px solid rgba(230, 230, 230, 1);
          box-sizing: border-box;
          padding: 10px 0;
          display: flex;
          //  border: 1px solid black;
          img {
            width: 119px;
            height: 119px;
            border: 1px solid black;
            margin-right: 50px;
            cursor: pointer;
          }
          .item_center {
            width: 360px;
            height: 47px;
            font-size: 18px;
            font-family: Microsoft YaHei;
            font-weight: 400;
            color: rgba(61, 61, 61, 1);
            line-height: 28px;
            span {
              width: 110px;
              height: 14px;
              font-size: 16px;
              font-family: Microsoft YaHei;
              font-weight: 400;
              color: rgba(127, 127, 127, 1);
              line-height: 28px;
            }
            p {
              display: block;
              height: 56px;
              margin-top: 0px;
            }
          }
          .goodsprice {
            display: block;
            height: 120px;
            width: 100px;
            text-align: center;
            line-height: 120px;
            margin-left: 68px;
            font-size: 20px;
            font-family: Microsoft YaHei;
            font-weight: bold;
            color: rgba(224, 32, 63, 1);
          }

          .orderbuy {
            height: 120px;
            display: flex;
            align-items: center;
            justify-content: center;
            margin-left: 68px;

            span {
              display: block;
              width: 80px;
              height: 30px;
              line-height: 30px;
              text-align: center;
              background: rgba(240, 58, 88, 1);
              border-radius: 6px;
              font-size: 18px;
              font-family: Microsoft YaHei;
              font-weight: bold;
              color: rgba(255, 255, 255, 1);
              cursor: pointer;
            }
          }
          .purchasesCountSelect {
            height: 120px;
            display: flex;
            align-items: center;
            justify-content: center;
            margin-left: 68px;
          }
        }
      }
      .pagination {
        padding-top: 20px;
        width: 100%;
        display: flex;
        justify-content: center;
        .pbg >>> .el-pager .active {
          background-color: red;
        }
      }
    }
  }
  .head_breadcrumb {
    width: 100%;
    span {
      width: 36px;
      height: 15px;
      font-size: 14px;
      font-family: Microsoft YaHei;
      font-weight: 400;
      color: rgba(128, 128, 128, 1);
      cursor: pointer;
    }
    .center_breadcrumb {
      width: 1200px;
      margin: 0 auto;
      height: 40px;
      position: relative;
      left: 10px;
      line-height: 40px;
    }
  }
}
::v-deep .el-pagination.is-background .el-pager li:not(.disabled).active {
  background: rgba(240, 58, 88, 1);
  color: #fff;
}
::v-deep .el-pagination.is-background .el-pager li:not(.disabled):hover {
  font-size: 14px;
  font-family: Microsoft YaHei;
  font-weight: 400;
  color: rgba(102, 102, 102, 1);
}
</style>
